<script>
import {getUser} from "../../utils/utils";

export default {
  name: "Relatives",
  data(){
    return{
      babyIds:[],
      pageSize:3,
      pageInfo:{},
      babyId:0,
      babies:[],
      user:{},
      form:{
        babyId:'',
        phone:'',
        relationship:''
      },
      dialogFormVisible:false,
    }
  },
  methods:{
    saveUpload(){
      this.$axios.post('/bp/add?babyId='+this.form.babyId+'&phone='+this.form.phone+'&relationship='+this.form.relationship+'&name='+this.user.name).then(resp=>{
        if (resp.data){
          this.$message.success('邀请成功，等待对方确认')
          this.paging(1)
          this.handleClose()
        }else {
          this.$message.error('邀请失败，请联系管理员')
        }
      })
    },
    upload(){
      if (!this.form.babyId){
        this.$message.warning('请选择宝宝')
        return
      }else if (!this.form.phone){
        this.$message.warning('请输入手机号')
        return
      }else if (!this.form.relationship){
        this.$message.warning('请输入关系')
        return
      }else {
        this.$axios.post("/user/checkphone?phone="+this.form.phone).then(resp=>{
          if (!resp.data){
            this.saveUpload()
          }else {
            this.$message.error('请输入正确的手机号！')
          }
        })
      }
    },
    handleClose(){
      this.form={}
      this.dialogFormVisible=false
    },
    addRela(){
      this.dialogFormVisible=true
    },
    delBabRela(row){
      this.$confirm('此操作将通知对方解除关系, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('/bp/del?childId='+row.childId+'&parentId='+row.parentId+'&name='+this.user.name).then(resp=>{
          if(resp.data){
            this.$message({
              type: 'success',
              message: '发送成功!'
            });
          }else {
            this.$message({
              type: 'error',
              message: '发送失败，请联系管理员！'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消解除'
        });
      });
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.paging(1)
    },
    paging(curPage){
      if(this.babyId===0){
        this.$axios.get("/bp/list?babyIds="+this.babyIds+"&curPage="+curPage+"&pageSize="+this.pageSize).then(resp=>{
          this.pageInfo=resp.data
        })
      }else{
        this.$axios.get("/bp/list?babyIds="+this.babyId+"&curPage="+curPage+"&pageSize="+this.pageSize).then(resp=>{
          this.pageInfo=resp.data
        })
      }
    },
    changeBaby(babyId){
      if(babyId!==0){
        this.form.babyId=babyId
      }
      this.babyId=babyId
      if(babyId===0){
        this.$axios.get("/bp/list?babyIds="+this.babyIds+"&curPage=1&pageSize="+this.pageSize).then(resp=>{
          this.pageInfo=resp.data
        })
      }else{
        this.$axios.get("/bp/list?babyIds="+babyId+"&curPage=1&pageSize="+this.pageSize).then(resp=>{
          this.pageInfo=resp.data
        })
      }
    },
  },
  created() {
    this.user=getUser()
    this.$axios.get('babyPic/getBabies?userId=' + this.user.id).then(resp=>{
      this.babies=resp.data
      this.babyIds=[]
      this.babies.forEach(baby=>{
        this.babyIds.push(baby.id)
        console.log(this.babyIds)
      })
      this.paging(1)
    })
  }
}
</script>

<template>
  <div>
    <el-button type="primary" @click="addRela">添加家长</el-button>
    <el-table
      :data="pageInfo.list"
      style="width: 100%">
      <el-table-column
        prop="baby.name"
        label="宝宝姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="baby.petName"
        label="宝宝小名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="user.name"
        label="家长姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="relationship"
        label="关系">
      </el-table-column>
      <el-table-column
        prop="user.phone"
        label="家长手机号">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="操作">
        <template slot-scope="scope">
          {{ scope.row.status }}
          <el-button type="danger" @click="delBabRela(scope.row)">解除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="paging"
      :current-page="pageInfo.pageNum"
      :page-sizes="[3,6,9,12]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>

    <el-dialog
      title="添加亲友"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
      <el-form :model="form">
        <el-form-item label="选择宝宝：">
          <el-select v-model="form.babyId" placeholder="请选择宝宝"  style="width: 300px">
            <el-option
              v-for="baby in babies"
              :key="baby.id"
              :label="baby.name"
              :value="baby.id">
              <span style="float: left">{{ baby.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ baby.petName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名：">
          <el-input v-model="form.phone" placeholder="请输入家长的手机号" style="width: 90%"></el-input>
        </el-form-item>
        <el-form-item label="关系：">
          <el-input v-model="form.relationship" placeholder="请输入家长的用户名" style="width: 90%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="upload">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>
